<template>
	<dialog01 :width="'70%'" :centerDialogVisible="showVisible" headertitle="图片上传" :title="''"
		@cancel="showVisible = false">
		<div slot="content-one">
			<slot name="content"></slot>
			<el-upload action="/" list-type="picture-card" :multiple="true" :auto-upload="false" :on-change="handleChange"
				:file-list="fileList" :show-file-list="true" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
				ref="myupload">
				<i class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
			<div style="text-align: center;">
				<el-button type='primary' @click="pcompressImg">确定</el-button>
			</div>
			<!-- 图片放大预览 -->
			<imgViewer :imgkey="'url'" :imglist="imgList" ref="myimgViewer"></imgViewer>
		</div>
	</dialog01>
</template>

<script>
	import {
		compressImg
	} from "@/lib/utils/utils";
	import {
		uploadsUrl,
		CODE
	} from '@/common/apiconfig';
	import Axios from 'axios';
	import {
		code
	} from '@/lib/utils/validate';
	export default {
		name: "uploadImgs",
		meta: {
			descr: "多图片上传"
		},
		props: {
			show: {
				default: false
			},
			fileType: {
				default: ''
			},
			path: {
				default: ''
			},
			imgKey: {
				default: ''
			},
			list: {
				default: () => {
					return []
				},
			},
			headertitle: {
				default: null
			},
			uploadSize: {
				default: 100
			}
		},
		computed: {
			fileList() {
				try {
					if (this.imgKey) {
						return this.list.map(i => {
							return {
								url: i[this.imgKey]
							}
						})
					} else {
						return this.list.map(i => i);
					}

				} catch (error) {
					// console.log(error);
					return [];
				}
			},
			showVisible: {
				get: function() {
					return this.show;
				},
				set: function(e) {
					this.$emit('update:show', e);
				}
			}
		},
		data() {
			return {
				imgList: [],
				seq: 0,
				loading: null
			};
		},
		methods: {
			cancel(d) {
				let that = this;
				that.$emit('cancel', false);
			},
			//图片移除
			handleRemove(file, fileList) {
				let that = this;
				that.imgList = fileList;
			},
			//文件监听
			handleChange(file, fileList) {
				let that = this;
				that.imgList = fileList;
				let isLt2M = file.size / 1024 / 1024 < that.uploadSize;
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过' + that.uploadSize + 'M!');
					that.$refs.myupload.uploadFiles.splice(fileList.length - 1, 1);
				}
			},
			//图片预览
			handlePictureCardPreview(file) {
				let that = this;
				that.$refs.myimgViewer.showImg();
			},
			pcompressImg() {
				let that = this;
				let result = this.imgList.filter((o) => {
					return o.status === "ready";
				});
				if (result.length === 0) {
					this.saveUploadImg();
				} else {
					that.seq = result.length;
					that.imgList.forEach((item) => {
						if (item.status === "ready") {
							compressImg(item.raw, that, function(res, e) {
								item.raw = res.file;
								e.seq--;
								if (e.seq === 0) {
									that.saveUploadImg();
								}
							});
						}
					});
				}
			},
			saveUploadImg() {
				let that = this;
				let formData = new FormData();
				that.imgList.forEach(item => {
					if (item.status === "ready") {
						formData.append('files[]', item.raw, item.raw.name);
					}
				})
				var jsons = {
					files: this.imgList
				};
				Axios.post(uploadsUrl, formData, false).then(res => {
					let arrayList = new Array();

					that.imgList.forEach(item => {
						let obj = {};
						if (item.status === "success") {
							if (this.imgKey) obj[this.imgKey] = item.url;
							else obj = item.url;
							arrayList.push(obj);
						}
					})
					console.log(111);
					if (res.data[CODE.code] === CODE.success) {
						var arr = [];
						res.data.data.forEach(item => {
							let obj = {};
							if (this.imgKey) obj[this.imgKey] = item;
							else obj = item;
							arrayList.push(obj);
						})
					}
					that.$emit('update:list', arrayList);
					that.$emit('finish');
				})
			}
		},
		created() {}
	};
</script>